<template>
	<view class="detail-container">
		<view class="top">
			<video id="myVideo" :src="videoSrc" @error="videoErrorCallback" controls="false"
				style="width:100%;height:200px;border-radius: 10px;" loop>
			</video>
			<view class="grid">
				<text class="top-text">{{ title }}</text>
				<view class="grid-hhhh">
					<view class="grid-item">
						<text class="grid-text">授课时间：2022-4-20</text>
						<view>
							<text class="grid-text">主讲老师：{{ teachers }}</text>
						</view>
					</view>
					<view>
						<text class="grid-text" style="color: red; font-size: 19px; margin-right: 10px;">{{ price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)"
				:class="{ active: currentIndex === index }">
				{{ tab }}
			</view>
		</view>
		<view class="content">
			<view v-if="currentIndex === 0" class="course-intro">
				<view class="content-item">
					<view class="item-title">课程介绍</view>
					<view class="item-text">MySQL基础入门–mysql数据库实战教程，主要讲的是如何学习MySQL的用法和应用</view>
				</view>
				<!-- 讲师 -->
				<view class="content-item">
					<view class="item-title">讲师介绍</view>
					<view class="teacher-info">
						<image class="avatar" :src="teacher.avatar"></image>
						<view class="info">
							<text class="name">{{ teacher.name }}</text>
							<br />
							<text class="title">{{ teacher.title }}</text>
						</view>
						<view class="guanzhu">关注</view>
					</view>
					<view class="description">{{ teacher.description }}</view>
					<view class="look">去他主页看看</view>
				</view>
				<view class="content-item">
					<view class="item-title">评论</view>
					<!-- 学生评论 -->
					<view class="message-container" v-for="(comment, index) in pinglun" :key="index">
						<view class="message-item">
							<image class="avatar" :src="comment.avatar" />
							<view class="message-content">
								<view class="username">{{ comment.username }}</view>
								<text class="message-text">{{ comment.text }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentIndex === 1" class="ratings">
				<CommentSection :comments="comments" />
			</view>
			<view class="buttons">
				<button type="primary" @click="listen">立即试听</button>
				<button type="default" @click="buy">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	import CommentSection from '../../components/pinglun/pinglun.vue'
	export default {
		components: {
			CommentSection,
		},
		data() {
			return {
				videoSrc: '/static/video/intro.mp4',
				title: '', // 接收的课程标题
				teachers: '', //接收的课程老师
				price: '',
				// 原始内容
				content: "授课时长",
				tabs: ['简介', '评价'],
				currentIndex: 0, // 当前选中的标签索引
				courseId: '01', // 当前课程的唯一标识
				teacher: {
					avatar: '/static/teacher/1.png',
					name: '辰晨老师',
					title: 'UI设计师',
					description: '毕业于广州美术学院，多年插画工作经验：善于洞悉插画教学逻辑和规律；独家教学技巧，教你笑对插画学习；授课风格幽默风趣。',
				},
				pinglun: [{
						avatar: '/static/teacher/4.png',
						username: 'Ta',
						text: '求求老师了，快点更吧，一天更一点也好呀，别等24号一次性全更完。'
					},
					{
						avatar: '/static/teacher/5.png',
						username: '小美',
						text: '求求老师了，快点更吧，一天更一点也好呀，别等24号一次性全更完。'
					},
				],
				comments: [{
						username: "SL_喜不然",
						avatar: "/static/teacher/1.png",
						content: "就喜欢这种没有废话干净的知识点",
						date: "2025-03-19 16:14",
						replyCount: 0,
						likeCount: 24
					},
					{
						username: "超高校级的废物",
						avatar: "/static/teacher/1.png",
						content: "补考过了就来还原🐣️",
						date: "2025-02-17 12:36",
						replyCount: 3,
						likeCount: 15
					},
					{
						username: "超高校级的废物",
						avatar: "/static/teacher/1.png",
						content: "过了兄弟们啊啊啊啊啊啊啊",
						date: "2025-03-18 11:44",
						replyCount: 0,
						likeCount: 8
					},
					{
						username: "超高校级的废物",
						avatar: "/static/teacher/1.png",
						content: "过了兄弟们啊啊啊啊啊啊啊",
						date: "2025-03-18 11:44",
						replyCount: 0,
						likeCount: 8
					},
				]
			};
		},
		onLoad(options) {
			if (options) {
				this.title = decodeURIComponent(options.title); // 解码标题
				this.teachers = decodeURIComponent(options.teachers); // 解码教师
				this.price = decodeURIComponent(options.price); // 解码价格
			}
		},
		methods: {
			selectTab(index) {
				console.log('Selected tab:', index); // 添加调试
				this.currentIndex = index;
			},
			listen() {
				uni.showToast({
					title: '点击了立即试听',
					icon: 'none'
				});
			},
			buy() {
				uni.showToast({
					title: '点击了立即购买',
					icon: 'none'
				});
			},
		},
	};
</script>

<style lang="scss">
	.detail-container {
		padding: 20px;
		height: auto;
	}

	.top {
		background-color: white;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
		height: 310px;
		border-radius: 10px;
	}

	.top-text {
		font-size: 18px;
	}

	.hhh {
		display: flex;
		align-items: center;
	}

	.grid-hhhh {
		display: flex;
		flex-wrap: wrap;
		/* 自动换行 */
		align-items: center;
		justify-content: space-between;
		margin-top: 8px;
	}

	.grid-item {
		width: 48%;
		/* 每行显示两个项目 */
		border-radius: 10px;
		line-height: 2.0;
		margin-left: 10px;
		padding: 3px 0;
	}

	.grid-image {
		width: 30px;
		height: 30px;
	}

	.grid-text {
		font-size: 14px;
		color: #333333;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		border-radius: 10px;
		margin-bottom: 20px;
		margin-top: 30px;
	}

	.tabs view {
		padding: 10px;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}

	.tabs .active {
		border-bottom: 2px solid #4caf50;
	}

	.teacher-info {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.info {
		flex: 1;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
	}

	.title {
		color: #888;
	}

	.guanzhu {
		border: 1px solid skyblue;
		color: white;
		border-radius: 10px;
		width: 50px;
		text-align: center;
		background-color: skyblue;
	}

	.look {
		text-align: right;
		color: royalblue;
	}

	.description {
		margin-top: 10px;
		line-height: 1.5;
	}

	.content {
		margin-bottom: 20px;
	}

	.course-intro text,
	.ratings text {
		margin-bottom: 10px;
	}

	.content-item {
		margin-top: 20px;
	}

	.item-title {
		font-size: 18px;
		font-weight: bold;
	}

	.item-text {
		font-size: 16px;
		margin-top: 10px;
	}

	.buttons {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 370px;
	}

	.buttons button {
		width: 50%;
		margin-right: 10px;
	}

	.buttons button:last-child {
		margin-right: 0;
	}

	.message-container {
		padding: 10px;
	}

	.message-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.message-content {
		flex: 1;
		background-color: #f0f0f0;
		padding: 10px;
		border-radius: 10px;
	}

	.message-content2 {
		flex: 1;
		background-color: #f0f0f0;
		padding: 10px;
		border-radius: 10px;
		position: fixed;
	}

	.username {
		font-size: 16px;
		color: #333;
	}

	.message-text {
		font-size: 14px;
		color: #666;
	}

	.ratings {
		min-height: 500px;
		padding: 20rpx;
		background-color: #fff;
	}
</style>